<template>
     <div class="unitClass" >
        <el-radio-group v-model="unitName">
        <el-radio-button  
        v-for="unit in unitList"  
        :label="unit.unitName" 
        :key="unit.id"
        @click="updateWordList(unit.wordList)"></el-radio-button>
        </el-radio-group>
  </div>
</template>

<script>
import axios from 'axios';
import PubSub from 'pubsub-js'

import {ref,reactive} from 'vue'

export default {
    name:'Unit',
    setup(props,context){

        let unitName = ref('')

        let unitList = reactive([])

        let wordList = reactive([])

        function getWord(gradeId){

            axios.get(`http://localhost:8080/api/word/word/${gradeId}`).then(
            res=>{
                
                // 清空数组
                unitList.length = 0
                unitName.value = ''
                wordList.length = 0

                
                PubSub.publish('sendWordList', wordList) // 发布消息, 触发订阅的回调函数调用

                res.data.data.forEach(element => {
                    unitList.push(element)
                });
                
            },error=>{
                console.log("失败")
            })
        }

        function updateWordList(value){

           
            
            wordList.length = 0;
            value.forEach(element=>{
                wordList.push(element)
            })
           
            PubSub.publish('sendWordList', wordList) // 发布消息, 触发订阅的回调函数调用
        }

        return{
            unitName,
            unitList,
            getWord,
            updateWordList
        }

    }
}

</script>

<style scoped>
 .unitClass{
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin: 5px;
 }

</style>